<template>
  <span v-if="presenter.optShow.edit">
    <el-button v-permission="presenter.permission.edit" size="small" type="success" icon="edit" @click="handleEdit(data)" title="修改"/>
  </span>
  <span v-if="presenter.optShow.remove" v-permission="presenter.permission.remove" style="margin-left: 10px">
    <el-popover
        placement="top"
        :width="180"
        v-model:visible="visible"
    >
    <p> 确定删除本条数据吗？</p>
    <div style="text-align: right; margin: 0">
      <el-button size="small" :disabled="!removeCancelable" @click="visible = false">取消</el-button>
      <el-button type="primary" size="small" :loading="removeLoading" @click="handleRemove(data)">确定</el-button>
    </div>
    <template #reference>
      <el-button size="small" type="danger" icon="delete" @click="visible = true" title="删除"/>
    </template>
  </el-popover>
  </span>

</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      removeLoading: false,
      removeCancelable: true,

      // 主页
      presenter: null
    }
  },
  created() {
    this.presenter = this.getPresenter()
  },
  methods: {
    getPresenter(parent = this.$parent) {
      if (parent.IS_ESJ_CRUD) {
        return parent
      } else {
        return this.getPresenter(parent.$parent)
      }
    },
    handleEdit(data) {
      this.presenter.handleEdit(data)
    },
    handleRemove(data) {
      this.removeLoading = true
      this.removeCancelable = false
      this.presenter.handleRemove(data).then(() => {
        this.visible = false
        this.removeLoading = false
        this.removeCancelable = true
      }).catch(() => {
        this.removeLoading = false
        this.removeCancelable = true
      })
    }
  }
}
</script>
